css3 缩放scale()方法 |
您所在的位置:网站首页 › css 缩放中心点 › css3 缩放scale()方法 |
一、scale()方法
缩放,指的是“缩小”和“放大”。在CSS3中,我们可以使用scale()方法来将元素根据中心原点进行缩放。 跟translate()方法一样,缩放scale()方法也有3种情况: (1)scaleX(x):元素仅水平方向缩放(X轴缩放); (2)scaleY(y):元素仅垂直方向缩放(Y轴缩放); (3)scale(x,y):元素水平方向和垂直方向同时缩放(X轴和Y轴同时缩放); 1、scaleX(x)语法: transform:scaleX(x) 说明: x表示元素沿着水平方向(X轴)缩放的倍数,如果大于1就代表放大;如果小于1就代表缩小。 大家想想倍数是怎样一个概念就很好理解了。 2、scaleY(y)语法: transform:scaleY(y) 说明: y表示元素沿着垂直方向(Y轴)缩放的倍数,如果大于1就代表放大;如果小于1就代表缩小。 3、scale(x,y)语法: transform:scale(x,y) 说明: x表示元素沿着水平方向(X轴)缩放的倍数,y表示元素沿着垂直方向(Y轴)缩放的倍数。 注意,Y是一个可选参数,如果没有设置Y值,则表示X、Y两个方向的缩放倍数是一样的(同时放大相同倍数)。 举例: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
CSS3缩放scale()方法
/*设置原始元素样式*/ #origin { margin:100px auto;/*水平居中*/ width:200px; height:100px; border:1px dashed gray; } /*设置当前元素样式*/ #current { width:200px; height:100px; color:white; background-color: #3EDFF4; text-align:center; transform:scaleX(1.5); -webkit-transform:scaleX(1.5); /*兼容-webkit-引擎浏览器*/ -moz-transform:scaleX(1.5); /*兼容-moz-引擎浏览器*/ }
在浏览器预览效果如下: 分析: 从上图可以看出,元素沿着X轴方向放大了1.5倍(两个方向同时延伸,整体放大1.5倍)。 1 2 3 transform:scaleY (1.5); -webkit-transform:scaleY(1.5); /*兼容-webkit-引擎浏览器*/ -moz-transform:scaleY(1.5); /*兼容-moz-引擎浏览器*/ 当使用上面代码时,在浏览器预览效果如下: |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |